<template>
  <div class="analytics-view">
    <h1>📊 数据分析</h1>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>📈 销售趋势</template>
          <v-chart class="chart" :option="salesTrendOption" autoresize />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>🥧 票务类型分布</template>
          <v-chart class="chart" :option="ticketTypeOption" autoresize />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { analyticsAPI } from '@/api'
export default {
  name: 'AnalyticsView',
  data() {
    return {
      salesTrendOption: {
        title: { text: '销售趋势' }, tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ data: [], type: 'line', smooth: true }]
      },
      ticketTypeOption: {
        title: { text: '票务类型分布', left: 'center' }, tooltip: { trigger: 'item' },
        series: [{ type: 'pie', radius: '50%', data: [] }]
      }
    }
  },
  async mounted() {
    await this.loadSalesTrend()
    await this.loadTicketDistribution()
  },
  methods: {
    async loadSalesTrend() {
      try {
        const t = await analyticsAPI.getSalesTrend()
        const labels = t?.labels || []
        const values = t?.values || []
        this.salesTrendOption = { ...this.salesTrendOption, xAxis: { type: 'category', data: labels }, series: [{ data: values, type: 'line', smooth: true }] }
      } catch (_) {}
    },
    async loadTicketDistribution() {
      try {
        const d = await analyticsAPI.getTicketTypeDistribution()
        const data = Array.isArray(d) ? d : (d?.data || [])
        this.ticketTypeOption = { ...this.ticketTypeOption, series: [{ type: 'pie', radius: '50%', data }] }
      } catch (_) {}
    }
  }
}
</script>

<style scoped>
.analytics-view {
  padding: 20px;
}
.chart { height: 300px; }
</style>